<template>
  <Modal
    ref="modal"
    title="快递供应商"
    width="600px"
    :before-show="beforeShow"
  >
    <template #reference>
      <slot />
    </template>
    <el-form
      ref="form"
      class="set-form"
      label-width="120px"
      :model="form"
      :rules="rules"
    >
      <el-form-item
        label="企点快递code"
        prop="logisticsCode"
      >
        <el-input v-model.trim="form.logisticsCode" />
      </el-form-item>
      <el-form-item
        label="中台快递code"
        prop="yunlspCode"
      >
        <el-input v-model.trim="form.yunlspCode" />
      </el-form-item>
      <el-form-item
        label="快递公司中文名"
        prop="logisticsNameCn"
      >
        <el-input v-model.trim="form.logisticsNameCn" />
      </el-form-item>
      <el-form-item
        label="快递公司英文名"
        prop="logisticsNameEn"
      >
        <el-input v-model.trim="form.logisticsNameEn" />
      </el-form-item>
      <el-form-item
        label="718快递公司代码"
        prop="track718Code"
      >
        <el-input v-model.trim="form.track718Code" />
      </el-form-item>
      <el-form-item
        label="51快递公司代码"
        prop="track51Code"
      >
        <el-input v-model.trim="form.track51Code" />
      </el-form-item>
      <el-form-item
        label="after ship快递公司代码"
        prop="afterShipCode"
      >
        <el-input v-model.trim="form.afterShipCode" />
      </el-form-item>
      <el-form-item
        label="快递公司官网"
        prop="website"
      >
        <el-input v-model.trim="form.website" />
      </el-form-item>
      <el-form-item
        label="快递公司电话"
        prop="telephone"
      >
        <el-input v-model.trim="form.telephone" />
      </el-form-item>
      <el-form-item
        label="快递公司LOGO"
        prop="logo"
      >
        <el-input v-model.trim="form.logo" />
      </el-form-item>
      <el-form-item
        label="是否启用"
        prop="enable"
      >
        <el-switch
          v-model="form.enable"
          :active-value="true"
          :inactive-value="false"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item
        label="常用权重"
        prop="usedWeight"
      >
        <el-input
          v-model.trim="form.usedWeight"
          type="number"
        />
      </el-form-item>
      <el-form-item
        label="数据来源"
        prop="source"
      >
        <el-input v-model.trim="form.source" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="text-center">
        <el-button @click="() => $refs.modal.hide()">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleSave"
        >
          确定
        </el-button>
      </div>
    </template>
  </Modal>
</template>

<script>
import { saveExpressSupplier } from '@/api/express'
import { cloneDeep } from 'lodash-es'
import { isSuccess } from '@/utils/common'

export default {
    components: {
        Modal: () => import('@/components/Modal'),
    },
    props: {
        value: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            rules: {
                logisticsCode: [{ required: true, message: '必填' }],
            },
            form: {},
        }
    },
    watch: {},
    created() {},
    methods: {
        async beforeShow() {
            await this.getDetail()
        },
        async getDetail() {
            this.form = cloneDeep(this.value)
        },
        async handleSave() {
            const valid = await this.$refs.form.validate()
            if (valid) {
                const res = await saveExpressSupplier(this.form)
                if (isSuccess(res)) {
                    this.$message.success('修改成功!')
                    this.$store.dispatch('express/list')
                    this.$refs.modal.hide()
                }
            }
        },
    },
}
</script>
<style scoped>
  .set-form {
    height: 500px;
    overflow: auto;
  }
</style>